<template>
    <div class="repair_main">
        <!--        标题部分-->
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">维修总控台</h1>
                <span class="" style="margin-left: 10px">/ 维修事件总览 / 维修事件控制</span>
            </el-col>
        </el-row >

        <!--  事件内容-->
        <div class="content">
            <div class="boxtable" v-for="atable in tablehead">
                <div class="fortable" >
                    <div style="padding-top: 10px">
                        <span style="color: #1D2939;margin-left:15px;font-size: 18px">{{atable.tableName}}</span>
                        <span style="color: #1D2939;margin-left:15px;">共计：{{atable.wCount.wNum==0?0:atable.wCount.wNum}}条</span>
                        <router-link to="/repairsever"><el-button size="mini" style="float: right;margin: -5px 5px 0 0">查看所有</el-button></router-link>
                    </div>
                    <div style="padding: 0px 5px"><hr /></div>
                    <el-table
                            :data="atable.workData" size="mini" style="margin-left: 10px" height="200"  >
                        <el-table-column
                                prop="workordId"
                                label="工单编号"
                                width="100" >
                        </el-table-column>
                        <el-table-column
                                label="对应客户"
                                width="100">
                            <template slot-scope="scope">
                                {{scope.row.customer.customerName}}
                            </template>
                        </el-table-column>
                        <el-table-column label="发起时间"  width="100">
                            <template slot-scope="scope">
                                {{scope.row.takeTime | format_date}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="100"
                                label="接单人">
                            <template slot-scope="scope">
                                {{scope.row.emp.empName}}
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="showOne(scope.row)" >点击管理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <!--        查看内容弹窗-->
        <el-dialog title="工单内容" :visible.sync="dialogEssayVisble" width="50%">
            <div style="width:100%;min-height: 300px" >
                <el-form label-width="150px" style="overflow:hidden;" >
                    <el-form-item label="工单编号：">
                        {{dialogEssay.workordId}}
                    </el-form-item>
                    <el-form-item label="对应客户：">
                        {{dialogEssay.customer}}
                    </el-form-item>
                    <el-form-item label="客户联系人：" class="inline__" >
                        {{dialogEssay.linkman}}
                    </el-form-item>
                    <el-form-item label="联系方式：" class="inline__">
                        {{dialogEssay.linktype}}
                    </el-form-item>
                    <el-form-item label="发起时间：" class="inline__">
                        {{dialogEssay.takeTime | format_date}}
                    </el-form-item>
                    <el-form-item label="发起人：" class="inline__">
                        {{dialogEssay.emp}}
                    </el-form-item>

                </el-form>

            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "RepairCtrl",
        data:function() {
            return {
                tablehead:[],
                dialogEssayVisble: false,
                dialogEssay:{},
                kcName:'',//表头名字
                pageSize:5,//分页页大小
                currPage:1,//当前页码，默认为1
                totalSize:0,//总记录数
                searchParam:''
            }
        },
        methods: {
            initAllData(){
                this.$axios.get("api/after-sale/workord/allworkord-list")
                    .then(v=>{
                        this.tablehead = v.data;
                    }).catch();
            },
            showOne(row){

                this.dialogEssay={
                    workordId:row.workordId,
                    takeTime:row.takeTime,
                    linkman:row.linkMan.contactName,
                    linktype:row.linkWay,
                    emp:row.emp.empName,
                    customer:row.customer.customerName
                };

                this.dialogEssayVisble = true;
            }
        },
        created() {
            this.initAllData();
        }
    }
</script>

<style scoped="scoped">
    hr {
        margin-top:7px;
        *margin: 0;
        border: 0;
        color: gainsboro;
        background-color: gainsboro;
        height: 1px
    }

    *{margin: 0;padding: 0;font-size: 14px;}


    /*标题*/
    .repair_main{background: rgb(226,229,236);overflow: hidden;}
    .head{height:70px;background: #fcfbfd;line-height: 70px}
    .contract_title{display: inline-block;font-weight: unset;margin-left: 20px;font-size: 25px;}
    .el-col span{color: #b4b4bc}

    /*内容*/
    .content{
        width: 100%;
        overflow: hidden;
    }

    .boxtable{
        width:49%;
        float: left;
        min-height: 230px;
        /*border: 1px black solid;*/
        margin: 0;
        overflow: hidden;
    }

    .fortable{
        background-color: white;
        height: 100%;
        margin: 20px 0 0 20px;

        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px
    }

    .inline__{width:50%!important;display:inline-block}

</style>